<template>
  <div>
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="130px"
    >
      <el-form-item label="流转至节点" prop="taskActivityId" label-position="left">
        <el-select v-model="formData.taskTargetActivityId" placeholder="请选择" class="!w-240px">
          <el-option
            v-for="item in childNodeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="会签关系" prop="isParallel" label-position="left">
        <el-select v-model="formData.isParallel" class="!w-240px">
          <el-option
            v-for="item in parallelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="流转至节点操作者" prop="assigneeUserIds" label-position="left">
        <el-select
          v-model="formData.assigneeUserIds"
          placeholder="请选择"
          class="!w-240px"
          multiple
          filterable
        >
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.nickname"
            :value="user.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleIntervenor"
          ><Icon icon="ep:success-filled" class="mr-5px" />确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { getProcessInstance } from '@/api/bpm/processInstance'
import { getProcessDefinition } from '@/api/bpm/definition'
import { getSimpleUserList } from '@/api/system/user'
import { processIntervention } from '@/api/bpm/task'
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const formRef = ref() // 表单ref
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  processInstanceId: props.id,
  // processInstanceId: props.id,
  // processDefinitionId: undefined,
  taskTargetActivityId: undefined,
  // isParallel: 'parallel',
  assigneeUserIds: []
})
const formRules = ref({
  nodeId: [{ required: true, message: '请选择流转至节点', trigger: 'blur' }],
  assigneeUserIds: [
    {
      required: true,
      message: '请选择处理人',
      trigger: 'blur'
    }
  ]
})
const parallelOptions = [
  {
    label: '非会签',
    value: 'noParallel'
  },
  {
    label: '会签',
    value: 'parallel'
  },
  {
    label: '依次逐个审批',
    value: 'sequential'
  }
]
const handleIntervenor = async () => {
  await processIntervention(formData.value)
}
const childNodeList = ref([])
const userList = ref([])
const getChildNode = (model) => {
  //递归出所有childNode
  if (model.childNode.id.startsWith('Activity')) {
    // console.log(model.childNode.id)
    let childNode = {
      id: model.childNode.id,
      name: model.childNode.name
    }
    childNodeList.value.push(childNode)
  }
  if (model.childNode.id === 'EndEvent') {
    childNodeList.value.push({ id: model.childNode.id, name: model.childNode.name })
    return
  }
  getChildNode(model.childNode)
}
onMounted(async () => {  
  // 获取流程实例的详情
  const res = await getProcessInstance(props.id)
  const simpleModel = JSON.parse(res.processDefinition.simpleModel)
  childNodeList.value.push({ id: simpleModel.id, name: simpleModel.name }) // 初始化根节点
  getChildNode(simpleModel)
  userList.value = await getSimpleUserList()


  // console.log(childNodeList.value)
})
</script>

<style lang="scss" scoped></style>
